<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>吕梁健康体检预约系统</title>
    <link rel="stylesheet" href="../css/page-health-index.css"/>
    <link rel="stylesheet" href="../css/page-health-login.css"/>
    <link rel="stylesheet" href="../plugins/elementui/index.css"/>
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <style type="text/css">
        .container_wrap{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99999999;
            background-color: rgba(0,0,0,0.5);
        }
        .conatiner{
            width: 60%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .el-icon-arrow-left:before,
        .el-icon-arrow-right:before {
            position: absolute;
            top: 50%;
            font-size: 30px;
            transform: translateY(-50%);
            z-index: 99999999;
            color: #fff;
            width: 45px;
            height: 45px;
            background: rgba(75, 72, 72,0.6);
            line-height: 45px;
            text-align: center;
            border-radius: 50%;
        }
        .el-icon-arrow-left:before{
            content: "\E6DE";
            left: 2px;
        }
        .el-icon-arrow-right:before {
            content: "\E6E0";
            right: 2px;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">吕梁健康体检预约系统</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="list-column2" v-for="(item,idx) in tphysicalList" :key="idx">
            <ul class="list">
                <li class="type-item" style="width: 100%">
                    <a class="link-page">
                        <div class="type-title">
                            <h3>姓名:{{item.name}}</h3>
                            <p>手机号:{{item.phonenumber}}</p>
                            <p>档案编码:{{item.filenumber}}</p>
                            <p>体检时间:{{item.physicalexamtime}}</p>
                            <p>体检状态:{{item.orderStatus}}</p>
<!--                            <p>体检状态:{{item.orderStatus}}</p>-->
                        </div>
                        <div class="type-icon" v-if="item.orderStatus === '报告已上传'" @click="openResult(idx)">
                            查看结果
                        </div>
                        <!--<div class="type-icon">
                            查看详情
                        </div>-->
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div v-if ="showImg"  class="container_wrap" @click.self="colsePreview">
        <span class="el-icon-arrow-left" @click="prev"></span>
        <div class="conatiner">
            <img :src="curImage" style="width:100%;">
        </div>
        <span class="el-icon-arrow-right" @click="next"></span>
    </div>
</div>


<!--<div class="my-gallery" data-pswp-uid="1" v-for="(item,idx) in imgArrays"  :key="idx">
    <figure>
        <div class="img-dv"><a href="img/img1-big.jpg" data-size="1920x1080"><img :src="item"></a></div>
    </figure>
</div>-->


<script>
    var vue = new Vue({
        el: '#app',
        data: {
            img_url: 'http://qta0cie0k.hb-bkt.clouddn.com/',
            mobile_backend_url: 'http://localhost:9002',
            tphysicalList: [],//列表信息
            imgArrays:[],
            srcList: [],
            curImage: '',
            curIndex: 0,
            showImg: false
        },
        methods: {
            colsePreview(){
                document.body.style.overflow = 'auto'
                this.showImg = false
            },
            openResult(idx){
                document.body.style.overflow = 'hidden'
                this.showImg = true
                var entity = this.tphysicalList[idx]
                var report = entity.report
                if (report !== null && report !== undefined && report.length > 0){
                    // this.arr1 = JSON.parse(report)
                    this.srcList = JSON.parse(report)
                    this.curImage = this.srcList[0]
                    this.curIndex = 0
                } else {
                    alert(' 请咨询客服 ')
                }
            },
            // 图片切换
            prev(){
                if (this.curIndex <= 0) return
                this.curIndex--
                this.curImage = this.srcList[this.curIndex]
            },

            next(){
                if (this.curIndex < this.srcList.length - 1){
                    this.curIndex = this.curIndex + 1
                } else {
                    return
                }
                this.curImage = this.srcList[this.curIndex]
            },

    /*        //查看结果 idx索引
            openResult(idx) {
                    //校验数据
                    var entity=this.tphysicalList[idx];
                    var report=entity.report;
                    if (report!== null && report !== undefined && report.length > 0){
                        this.imgArrays=JSON.parse(report);

                    } else {
                        alert("暂未生成结果! 请咨询客服")
                    }
            },*/
        },
        mounted() {
            //查询体检列表
            var storage=window.localStorage;
            var telephone=storage["telephone"];
            axios.get(this.mobile_backend_url + "/tPhyexamrecord/findTphyexamrecordList?telephone="+telephone).then((response) => {
                this.tphysicalList = response.data.data;
            });
        }
    });
</script>
</body>
</html>
